/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

@import '../../../src/global_styling/mixins/helpers';

$guideSideNavWidth: 240px;
$guideZLevelHighest: $ouiZLevel9 + 1000;
$elasticLogoTextLight: #FFF;
$elasticLogoTextDark: #1C1E23;

#guide { // sass-lint:disable-line no-ids
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  .ouiBody--headerIsFixed & {
    min-height: calc(100vh - #{$ouiHeaderHeightCompensation});
  }
}

body {
  @include ouiHeaderAffordForFixed;
}

.ouiBody--headerIsFixed--double {
  @include ouiHeaderAffordForFixed($ouiHeaderHeightCompensation * 2);

  #guide { // sass-lint:disable-line no-ids
    min-height: calc(100vh - #{$ouiHeaderHeightCompensation * 2});
  }

  .ouiHeader:not(.ouiHeader--fixed) {
    // Force headers below the full screen.
    // This shouldn't be necessary in consuming applications because headers should always be at the top of the page
    z-index: 0;
  }
}

.guideSideNav {
  @include ouiSideNavEmbellish;
  min-width: $guideSideNavWidth;
}

.guideSideNav__content {
  @include ouiYScroll;
  padding: 0 $ouiSizeL $ouiSizeL;
}

.guideSideNav__search {
  flex-shrink: 0;
  padding: $ouiSizeS $ouiSizeS $ouiSize;
}

.guideSideNav__item {
  // Hate to do this, but it's the only way to get the badge to display correctly
  .ouiSideNavItemButton__label {
    // By using the `icon` display of OuiSideNavItem, it will continue to:
    // a) truncate properly
    // b) not underline the badge when selected
    // But it shows to the left of the label instead of right, so we have to shift the order of the label
    order: -1;
  }

  .guideSideNav__newBadge {
    margin-left: $ouiSizeXS;
    margin-right: $ouiSizeXS;
  }

  // Shift the margin on the badge when selected and the dropdown arrow no longer shows
  .ouiSideNavItemButton-isSelected .guideSideNav__newBadge {
    margin-right: 0;
  }
}

.guideSideNav__item--inSearch {
  color: $ouiColorDarkShade;
}

.guideDemo__highlightLayout,
.guideDemo__highlightLayout--playground,
.guideDemo__highlightLayout--legacy {
  border: 1px solid transparentize($ouiColorPrimary, .9);
  overflow: hidden;
  height: 460px;
  display: flex;

  .ouiPageSideBar--sticky {
    top: 0;
  }
}

.guideDemo__highlightLayout--playground > div:not(.ouiPage) {
  height: 100%;
  width: 100%;
  padding: 0 !important; // sass-lint:disable-line no-important

  > .ouiPage--grow {
    height: 100%;
  }
}

.guideDemo__highlightLayout--legacy {
  > div,
  > div > div {
    background: transparentize($ouiColorPrimary, .9);
  }
}

.guideDemo__highlightHR > div,
.guideDemo__highlightSpacer .ouiSpacer,
.guideDemo__highlightGrid .ouiFlexItem,
.guideDemo__highlightGridWrap .ouiFlexItem div {
  background: transparentize($ouiColorPrimary, .9);
}

.guideDemo__highlightHR > div {
  padding: .1px;
  margin-bottom: $ouiSize;
}

.guideDemo__highlightSpacer .ouiCodeBlock {
  align-self: flex-start;
  margin-bottom: $ouiSize;
}


.guideDemo__highlightGrid .ouiFlexItem,
.guideDemo__highlightGridWrap .ouiFlexItem div {
  padding: $ouiSize;
}

// sass-lint:disable no-important
.guideDemo__textLines {
  background-image: linear-gradient($ouiFocusBackgroundColor 1px, transparent 1px) !important;
  background-size: 100% 8px !important;
  background-position-y: 2px;
}

// sass-lint:disable no-important
.guideDemo__textLines--s {
  background-image: linear-gradient($ouiFocusBackgroundColor 1px, transparent 1px) !important;
  background-size: 100% 7px !important;
  background-position-y: -2px;
}

.guideDemo__color {
  padding: $ouiSizeS;
  color: $ouiColorEmptyShade;
  font-size: $ouiFontSizeS;
  margin-top: $ouiSizeS;
  line-height: 1.5;
  height: 64px;

  .guideDemo__colorHex {
    font-size: $ouiFontSize;
  }
}


.guideDemo__size {
  background: $ouiTextColor;
  display: inline-block;
}

.guideDemo__sizeText {
  line-height: 1.5;
}

.guideDemo__sizeGrid {
  font-size: $ouiFontSizeS;
}

.guideDemo__ghostBackground {
  @if (lightness($ouiTextColor) < 50) {
    color: $ouiColorGhost;
    background: $ouiColorDarkestShade !important; // Override OuiPanel specificity
  }
}

.dpTest__purpleCal {
  background: $ouiColorVis3;
}

.dpTest__purpleInput {
  outline: solid 2px $ouiColorVis3;
}

.dpTest__purpleDay {
  background: $ouiColorVis3;
}

.dpTest__purplePopper {
  outline: solid 2px $ouiColorVis3;
}

.guideOptionsPopover {
  width: $ouiSize * 16;
}

.guideCharts__customLegend {
  font-size: $ouiFontSizeXS;
  position: absolute;
  width: 93px;
  right: 0;
  bottom: 0;
  padding: $ouiSizeXS;
}

.guideCharts__customLegendLine {
  display: inline-block;
  width: $ouiSize;
  height: calc($ouiSizeM / 2);
  background-color: currentColor;
  vertical-align: middle;
  margin-right: $ouiSizeS;
}

.guideCharts__customLegendLine--thin {
  height: 1px;
}

.guideDemo__notificationEventCircleIndicator {
  display: inline-block;
  width: $ouiSize;
  height: $ouiSize;
  background: $ouiColorPrimary;
  color: $ouiColorEmptyShade;
  font-size: $ouiSizeM;
  line-height: $ouiSize;
  text-align: center;
  border-radius: 50%;
}

.guideDemo__notificationEventHighlight {
  background: transparentize($ouiColorPrimary, .9);
  border-radius: $ouiBorderRadiusSmall;
  padding: $ouiSizeXS;
}

.guideDemo__notificationEvent {
  @include ouiFontSizeS;
  display: flex;
  flex-direction: column;

  > * {
    display: flex;
  }

  .guideDemo__notificationEventCircleIndicator {
    margin-right: $ouiSizeXS;
  }
}

.guideDemo__notificationEventTopRow {
  display: flex;

  > * {
    position: relative;
    margin-right: $ouiSizeXS;

    &:last-child {
      margin-right: 0;
    }
  }

  .guideDemo__notificationEventIcon {
    margin: 0 $ouiSizeXS;
  }

  .guideDemo__notificationEventCircleIndicator {
    position: absolute;
    top: -$ouiSizeS;
    left: 0;
  }
}

.guideDemo__notificationEventMeta {
  display: flex;
  width: 100%;
  margin: 0 $ouiSizeS;

  .ouiNotificationEventMeta {
    width: 100%;
  }
}

.guideDemo__notificationEventSections {
  margin-left: $ouiSizeXL + $ouiSizeXS;
  display: flex;
  flex-direction: column;

  > * {
    margin-top: $ouiSizeS;
  }
}

.guideDemo__notificationEventBadge {
  flex: 1;
}

.ouiDataGridRowCell--favoriteFranchise {
  background: transparentize($color: #800080, $amount: .95) !important;
}

.ouiDataGridHeaderCell--favoriteFranchise {
  background: transparentize($color: #800080, $amount: .9) !important;
}

.ouiTreeView__nodeInnerExample {
  color: $ouiColorDanger;
  font-weight: $ouiFontWeightBold;
}

.ouiSelectableTemplateSitewide__optionMeta--PINK {
  font-weight: $ouiFontWeightMedium;
  color: $ouiColorAccentText;
}


@import '../views/guidelines/index';
@import 'guide_section/index';
@import 'guide_rule/index';

@include ouiBreakpoint('xs', 's') {
  .guideSideNav {
    width: 100%;
  }

  .guideSideNav__content {
    padding: 0;
    border-top: $ouiBorderThin;
  }

  .guideSideNav__search {
    padding: $ouiSizeS;
  }
}

.guideHomePage__benefitsContainer,
.guideHomePage__featuredComponents {
  display: grid;
  gap: $ouiSizeL; // sass-lint:disable-line no-misspelled-properties
  padding-left: $ouiSizeL;
  padding-right: $ouiSizeL;
}

.guideHomePage__benefitsContainer {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.guideHomePage__featuredComponents {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.guideHomePage__illustration {
  @include ouiBreakpoint('s', 'm') {
    justify-content: center;
  }

  position: relative;
  display: flex;
  justify-content: flex-end;
}

.guideHomePage__illustrationEffect {
  display: block;
  position: relative;

  .guideHomePage__illustrationEffectSVG {
    transform: perspective(1600px);
    transform-style: preserve-3d;
    transition: all .3s ease-in-out;
    width: 100%;
    height: auto;

    &:before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .guideHomePage__illustrationTopLeftCorner {
    height: 50%;
    left: 0;
    position: absolute;
    top: 0;
    width: 50%;
    z-index: 300;

    &:hover ~ .guideHomePage__illustrationEffectSVG {
      transform: perspective(1600px) rotateX(-5deg) rotateY(5deg);

    }
  }

  .guideHomePage__illustrationTopRightCorner {
    height: 50%;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    z-index: 300;

    &:hover ~ .guideHomePage__illustrationEffectSVG  {
      transform: perspective(1600px) rotateX(-5deg) rotateY(-5deg);
    }
  }

  .guideHomePage__illustrationBottomLeftCorner {
    bottom: 0;
    height: 50%;
    left: 0;
    position: absolute;
    width: 50%;
    z-index: 300;

    &:hover ~ .guideHomePage__illustrationEffectSVG {
      transform: perspective(1600px) rotateX(5deg) rotateY(5deg);
    }
  }

  .guideHomePage__illustrationBottomRightCorner {
    bottom: 0;
    height: 50%;
    position: absolute;
    right: 0;
    width: 50%;
    z-index: 300;

    &:hover ~ .guideHomePage__illustrationEffectSVG  {
      transform: perspective(1600px) rotateX(5deg) rotateY(-5deg);
    }
	}
}

.guideHome__footer {
  display: flex;
  align-items: center;
}

.guideHome__footerHeart {
  color: $ouiColorAccentText;
}

.guideHome__footerLogo {
  // sass-lint:disable-block no-important
  vertical-align: middle;
  display: inline-block !important;
  margin-bottom: 0 !important;
  position: relative;
  top: -1px;
}

.guideHome__footerLogoText {
  fill: lightOrDarkTheme($elasticLogoTextDark, $elasticLogoTextLight);
}

.guideHome__hero {
  > * {
    padding: $ouiSizeL;
  }
}
